﻿<%@ Page Title="GridView" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="GridViewDemoPage.aspx.cs" Inherits="ASPControlsExtended.Demo.Demos.GridViewDemo.GridViewDemoPage" 
    MaintainScrollPositionOnPostback="true"%>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-4 col-lg-6 col-md-6 col-xs-12">
                <section class="section-item">
                    <header>Item Count - With Paging</header>
                    <aspextended:GridView id="gvPaging" runat="server"
                        DataKeyNames="Product,Category,Quantity"
                        AllowPaging="true"
                        PageSize="5"
                        CssClass="gridView"
                        RowStyle-CssClass="gridrow"
                        AlternatingRowStyle-CssClass="gridaltrow"
                        PagerStyle-CssClass="gridpagerrow"
                        GridLines="None"
                        HeaderStyle-CssClass="gridheader"
                        ItemCountVisible="true"
                        ItemCountCssClass="itemcount"
                        ItemCountText="Showing {0} to {1} out of {2} products."
                        OnPageIndexChanging="gvPaging_PageIndexChanging"
                        OnSelectedIndexChanging="gvPaging_SelectedIndexChanging">

                    </aspextended:GridView>
                </section>
            </div>
            <!-- Add the extra clearfix for only the required viewport -->
            <div class="clearfix visible-xs"></div>
            <div class="col-xl-4 col-lg-6 col-md-6 col-xs-12">
                <section class="section-item">
                    <header>Item Count - No Paging</header>
                    <aspextended:GridView id="gvNoPaging" runat="server"
                        AllowPaging="false"
                        CssClass="gridView"
                        RowStyle-CssClass="gridrow"
                        AlternatingRowStyle-CssClass="gridaltrow"
                        PagerStyle-CssClass="gridpagerrow"
                        GridLines="None"
                        HeaderStyle-CssClass="gridheader"
                        ItemCountVisible="true"
                        ItemCountCssClass="itemcount"
                        ItemCountText="Showing {2} products."
                        OnPageIndexChanging="gvPaging_PageIndexChanging">

                    </aspextended:GridView>
                </section>
            </div>
            <!-- Add the extra clearfix for only the required viewport -->
            <div class="clearfix visible-lg visible-md"></div>
            <div class="col-xl-4 col-lg-6 col-md-6 col-xs-12">
                <section class="section-item">
                    <header>Sorting</header>
                    <aspextended:GridView id="gvSorting" runat="server"
                        AllowPaging="false"
                        AllowSorting="true"
                        GridLines="None"
                        CssClass="gridView"
                        RowStyle-CssClass="gridrow"
                        AlternatingRowStyle-CssClass="gridaltrow"
                        PagerStyle-CssClass="gridpagerrow"
                        HeaderStyle-CssClass="gridheader"
                        OnPageIndexChanging="gvPaging_PageIndexChanging"
                        AutoGenerateColumns="false"
                        SortArrowVisible="true"
                        OnSorting="gvSorting_Sorting"
                        ArrowPosition="Left">
                        <Columns>
                            <asp:BoundField DataField="Product" SortExpression="Product" HeaderText="Product" />
                            <asp:BoundField DataField="Category" SortExpression="Category" HeaderText="Category" />
                            <asp:BoundField DataField="Quantity" SortExpression="Quantity" HeaderText="Quantity" />
                        </Columns>
                    </aspextended:GridView>
                </section>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <section class="section-item">
                    <header>Datakey</header>
                    <aspextended:GridView id="gvDataKey" runat="server"
                        AutoGenerateSelectButton="true"
                        DataKeyNames="Product,Category,Quantity"
                        AllowPaging="true"
                        PageSize="5"
                        CssClass="gridView"
                        RowStyle-CssClass="gridrow"
                        AlternatingRowStyle-CssClass="gridaltrow"
                        PagerStyle-CssClass="gridpagerrow"
                        GridLines="None"
                        HeaderStyle-CssClass="gridheader"
                        ItemCountVisible="true"
                        ItemCountCssClass="itemcount"
                        ItemCountText="Showing {0} to {1} out of {2} products."
                        OnPageIndexChanging="gvPaging_PageIndexChanging"
                        OnSelectedIndexChanging="gvPaging_SelectedIndexChanging">

                    </aspextended:GridView>
                    <asp:PlaceHolder ID="phSelectedProduct" runat="server" Visible="false">
                        <section>
                            Selected Product:<br />
                            <div class="container">
                                <div class="row">
                                    <div class="col-xs-12 col-md-6">Product:</div>
                                    <div class="col-xs-12 col-md-6"><asp:Label ID="lblProduct" CssClass="form-info" runat="server" /></div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-md-6">Category:</div>
                                    <div class="col-xs-12 col-md-6"><asp:Label ID="lblCategory" CssClass="form-info" runat="server" /></div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12 col-md-6">Quantity:</div>
                                    <div class="col-xs-12 col-md-6"><asp:Label ID="lblQuantity" CssClass="form-info" runat="server" /></div>
                                </div>
                            </div>
                        </section>                    
                    </asp:PlaceHolder>
                </section>
            </div>
    </div>


</asp:Content>
